<template>
	<view class="content">
		<showNewData ref='chrild1' ></showNewData>
		<view class="top_bar">
			<view class="bar_left">
				<input @input="search" type="text" value="" />
				<image src="../../static/image/index/search.png" mode="heightFix"></image>
			</view>
			<view  @click="backSearch" class="bar_right">
				<text>取消</text>
			</view>
		</view>
		<!--  -->
		<view class="main">
			<view class="wrap">
				<view v-show="userarr.length" class="title">用户</view>
				<view class="list_item">
					<view class="item_wrap"
					v-for='item,index in userarr'
					>
						<view class="img">
							<image :src="item.userimg" mode=""></image>
						</view>
						<view class="data">
							<view class="name" v-html="item.username">
								<!-- {{ item.name }} -->
							</view>
							<view class="email"v-html="item.email" >
								<!-- {{ item.email }} -->
							</view>
						</view>
						<view class="but">
							<view v-if='item.tip'>
								<view @click="addChat(item.id)" class="buts">
									发信息
								</view>
							</view>
							<view v-else>
								<view @click="addFriend(item.id)" class="buts but_add">
									加好友
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="wrap">
				<view class="title">群聊</view>
				<view class="list_item">
					<view class="item_wrap" v-for='(item,index) in grouparr' :key='index'>
						<view class="img">
							<image :src='item.group_img' mode=""></image>
						</view>
						<view class="data" v-html="item.html_groupname" ></view>
						<view class="but">
							<view class="buts" @click="toGroupDetail(item.groupname)" >
								查看
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import showNewData from '../../components/showNewData.vue'
	import datas from '../../commons/js/data.js'
	import request from '../../utails/request.js'
	
	export default {
		data() {
			return {
				userinfo:{},
				friends:[],
				userarr:[],
				grouparr:[],
			}
		},
		components:{
			showNewData
		},
		onLoad() {
			this.userinfo = uni.getStorageSync('userinfo')
			// 获取好友信息
			this.getFriends()
		},
		onShow() {
			this.getSocketData()
		},
		methods: {
			// 接socket提醒
			getSocketData(){
				this.socket.emit('login',this.userinfo.id)
				this.socket.on('shows',(data)=>{
					let datas = {
						userimg:data.userimg,
						username:data.username,
						message:data.message
					}
					
					let ch = this.$refs.chrild1
					setTimeout(()=>{
						ch.handleShow(datas)
					},300)
				})
			},
			
			// 接收搜索框是信息
			search(e){
				let search = e.detail.value
				this.searchUser(search)
			},
			// 查找 渲染
			async searchUser(e){
				this.userarr = []
				let arr = await request.request({url:'/search/',data:{search:e,userid:this.userinfo.id}})
				if(!arr) return
				let exp = eval("/"+e+"/g")
				if(arr.users){
					arr.users.forEach(v=>{
						// 根据名称和邮箱查询
						if(v.username.search(e) != -1 || v.email.search(e) != -1){
							// 区分是否为好友
							this.checkFriend(v)
							// 渲染搜索词
							v.username = v.username.replace(exp, '<span style="color:#f4ea2a;">'+e+'</span>')
							v.email = v.email.replace(exp, '<span style="color:#f4ea2a;">'+e+'</span>')
							this.userarr.push(v)
						}
					})
				}
				if(arr.groups){
					arr.groups.forEach(v=>{
						if(v.groupname.search(e) != -1){
							this.checkFriend(v)
							v.html_groupname = v.groupname.replace(exp, '<span style="color:#f4ea2a;">'+e+'</span>')
							this.grouparr.push(v)
						}
					})
				}
			},
			// 获取好友信息
			async getFriends(){
				const f = await request.request({url:'/frends/',data:{userid:this.userinfo.id}})
				this.friends = f
			},
			// 判断是否为好友
			checkFriend(e){
				let tip = 0
				let data = this.friends
				data.forEach(v=>{
					if((v.id_a==e.id)||(v.id_b==e.id)){
						tip = 1
					}
				})
				e.tip = tip
			},
			// 点击发信息
			addChat(id){
				uni.navigateTo({
					url:'../chatroom/chatroom?id='+id
				})
			},
			// 点击加好友
			addFriend(id){
				uni.navigateTo({
					url:'../user/user?id='+id
				})
			},
			// 点击查看群聊
			toGroupDetail(groupname){
				uni.navigateTo({
					url:'../grouphome/grouphome?groupname='+ groupname
				})	
			},
			
			// 取消按钮
			backSearch(){
				uni.navigateBack({
					delta:1
				})
			}
		}
	}
</script>

<style>
	.content{
		
	}
	/* 搜索头部 */
	.top_bar{
		position: fixed;
		width: 90%;
		top: 0;
		left: 20rpx;
		height: 88rpx;
		background: #ffffff;
		box-shadow: 0 1px 0 0 rgba(0,0,0,0.1);
		z-index: 100;
		padding: 20rpx;
		}
	.bar_left{
		float: left;
		width: 500rpx;
		margin: 14rpx 0;
		height: 60rpx;
		border: #8C8C88 1rpx solid;
		border-radius: 24rpx;
		font-size: 36rpx;
		position: relative;
	}
	.bar_left input{
		margin-left: 20rpx;
		width: 80%;
		height: 60rpx;
	}
	
	.bar_left image{
		/* 用绝对定位 */
		position: absolute;
		top: 10rpx;
		right: 20rpx;
		height: 40rpx;
		width: 40rpx;
	}
	.bar_right{
		float: left;
		height: 60rpx;
		margin: 14rpx 0;
		margin-left: 20rpx;
		width: 140rpx;
		background-color:#f4ea2a ;
		text-align: center;
		line-height: 60rpx;
		font-size: 36rpx;
		color: white;
		border-radius: 24rpx;
		}
		
	/*  */
	.main{
		margin-top: 88rpx;
		padding:60rpx;
	}
	.wrap{
		
	}
	.wrap .title{
		font-size: 40rpx;
		font-weight: 800;
	}
	
	.wrap .list_item{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	
	.wrap .list_item .item_wrap{
		flex: 1;
		height: 90rpx;
		padding: 15rpx 0;
	}
	.wrap .list_item .item_wrap .img{
		float: left;
		display: flex;
		height: 90rpx;
		width: 90rpx;
		justify-content: center;
		align-items: center;
	}
	.wrap .list_item .item_wrap .img image{
		height:75rpx;
		border-radius: 20rpx;
	}
	
	/* data */
	.wrap .list_item .item_wrap .data{
		float: left;
		padding-left: 20rpx;
		/* line-height: 90rpx; */
		height: 90rpx;
		width: 400rpx;
		/* font-size: 32rpx; */
	}
	.wrap .list_item .item_wrap .data .name{
		font: 40rpx;
		line-height: 40rpx;
	}
	.wrap .list_item .item_wrap .data .email{
		line-height: 64rpx;
		font-size: 14rpx;
		/* color: #8C8C88; */
	}
	.wrap .list_item .item_wrap .but{
		/* width height 不包含padding*/
		float: left;
		height: 60rpx;
		width: 110rpx;
		line-height: 60rpx;
		text-align: center;
		padding: 15rpx 5rpx;
	}
	.wrap .list_item .item_wrap .but .buts{
		background-color: #f4ea2a;
		color: white;
		border-radius: 15rpx;
	}
	.wrap .list_item .item_wrap .but .but_add{
		background-color: #e7e7e7;
		color:  #18a5cf;
		border-radius: 15rpx;
	}
</style>
